<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<title>Form Widgets Test (steel)</title>

	<link rel="stylesheet" href="../../../../dojo/dojo/resources/dojo.css">
	<link rel="stylesheet" href="../../../../dojo/dijit/tests/css/dijitTests.css">
	<style type="text/css">
	body {
		padding: 6.0em !important;
	}
	.widgetContainer {
		padding-top: 10px;
	}
	.testTitle {
		padding-bottom: 10px;
	}
	
	select {
		background-color: #d3d3d3;
	}
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../themes/steel/SteelBase.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../../../../dojo/dijit/tests/_testCommon.js"></script>

	<script language="JavaScript" type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.Select");
		dojo.require("dijit.form.Button");
		dojo.require("dijit.form.MultiSelect");
	    dojo.require("dijit.form.FilteringSelect");
	    dojo.require("dijit.form.SimpleTextarea");
	    dojo.require("dojo.data.ItemFileReadStore");
		dojo.require("dijit.form.HorizontalSlider");
		dojo.require("dijit.form.VerticalSlider");
		dojo.require("dijit.form.HorizontalRule");
		dojo.require("dijit.form.VerticalRule");
		dojo.require("dijit.form.HorizontalRuleLabels");
		dojo.require("dijit.form.VerticalRuleLabels");
		dojo.require("dijit.form.NumberSpinner");
		dojo.require("dijit.form.TimeTextBox");
		dojo.require("dojo.parser");
	    dojo.addOnLoad(function() {
	        var stateStore = new dojo.data.ItemFileReadStore({
	            url: "data/states.json"
	        });
	        var filteringSelect = new dijit.form.FilteringSelect({
	            id: "stateSelect",
	            name: "state",
	            value: "KY",
	            store: stateStore,
	            searchAttr: "name"
	        },
	        "stateSelect");
	    });
	</script>

</head>
<body class="steel">
<div style="padding-top:60px;"></div>
<div class="widgetContainer">
	<h3 class="testTitle">Dijit ComboBox Test</h3>
	<select dojoType="dijit.form.ComboBox" id="fruit" name="fruit">
    	<option>Apples</option>
    	<option selected>Oranges</option>
    	<option>Pears</option>
    	<option>Figs</option>
    	<option>Guavas</option>
    	<option>Water Melon</option>
    	<option>Papaya</option>
    	<option>Apricot</option>
	</select>
	<br>
	<br>
	<select dojoType="dijit.form.ComboBox" id="fruitD" name="fruitD" disabled="disabled">
    	<option>Apples</option>
    	<option selected>Oranges</option>
    	<option>Pears</option>
    	<option>Figs</option>
    	<option>Guavas</option>
    	<option>Water Melon</option>
    	<option>Papaya</option>
    	<option>Apricot</option>
	</select>
</div>
<div class="widgetContainer">
		<h4 class="testSubtitle">Setting Defaults</h4>
		<label for="s1">Test One: </label>
		<select jsId="s1" name="s1" id="s1" dojoType="dijit.form.Select" >
			<option value="TN">Tennessee</option>
			<option value="VA" selected="selected">Virginia</option>
			<option value="WA">Washington</option>
			<option value="FL">Florida</option>
			<option value="CA">California</option>
		</select>
		<button id="1465" dojoType="dijit.form.Button" onClick='console.log("clicked simple");' iconClass="plusIcon" value="getValue">
			Get Value
 		<script type="dojo/method" event="onClick">
				console.log(s1.get("displayedValue"));
			</script>
		</button>
		<br>
		<br>
		<label for="s2">Test Two: </label>
		<select jsId="s2" name="s2" id="s2" style="width: 150px;" dojoType="dijit.form.Select">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option type="separator"></option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option type="separator"></option>
			<option value="CA">California</option>
		</select>
		<br>
		<br>
		<label for="s3">Test Three: </label>
		<select jsId="s3" name="s3" id="s3" style="width: 150px;" dojoType="dijit.form.Select" disabled="disabled">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option type="separator"></option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option type="separator"></option>
			<option value="CA">California</option>
		</select>
</div>
<div class="widgetContainer">
		<h4 class="testSubtitle">Filtering Select</h4>
		<label for="stateSelect">Test One: </label>
		<input id="stateSelect">
		<br>
		<br>
    	<button dojoType="dijit.form.Button" onClick="alert(dijit.byId('stateSelect').attr('value'))" value="getValueFS">
        	Get value
    	</button>
</div>
<div class="widgetContainer">
		<h4 class="testSubtitle">Multi Select</h4>
		<label for="stateMS">Test One: </label>
		<select dojoType="dijit.form.MultiSelect" id="fruitMS" name="fruitMS" size="6">
    		<option value="AP">Apples</option>
    		<option value="OR">Oranges</option>
		   	<option value="FI">Figs</option>
    		<option value="GU">Guavas</option>
    		<option value="WM">Water Melon</option>
    		<option value="PA">Papaya</option>
    		<option value="AP">Apricot</option>
    		<option value="PE" selected>Pears</option>
		</select>
</div>
<div class="widgetContainer">
		<h4 class="testTextArea">Text Area</h4>
		<label for="stateMS">Text Area: </label>
		<textarea id="ta1" dojoType="dijit.form.SimpleTextarea" name="ta1" rows="5" cols="50"
			onFocus="console.log('user focus handler')"
			onBlur="console.log('user blur handler')"
	        onChange="dojo.byId('oc1').value=''+arguments[0]"
			selectOnClick="true"
		>Some text area test go here.
		</textarea>
</div>
<div class="widgetContainer">
		<h4 class="hSlider">Horizontal Slider</h4>
		<label for="slider1"><strong>Horizontal Slider Example</strong></label>
		<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
			onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"
			value="10"
			maximum="100"
			minimum="0"
			pageIncrement="100"
			showButtons="true"
			intermediateChanges="true"
			slideDuration="500"
			style="width:500px; height: 20px;"
			id="slider1">
				<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;" count="6" numericMargin="1"></ol>
				<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=6 style="height:5px;"></div>
				<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
				<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;">
					<li>lowest</li>
					<li>normal</li>
					<li>highest</li>

				</ol>
		</div>
		<label for="slider2"><strong>Vertical Slider Example</strong></label>
		<div dojoType="dijit.form.VerticalSlider" name="vertical1"
			onChange="dojo.byId('slider2input').value=arguments[0];"
			value="10"
			maximum="100"
			minimum="0"
			discreteValues="11"
			style="height:300px;"
			id="slider2">
				<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;" labelStyle="right:0px;">
					<li>0</li>
					<li>100</li>
				</ol>

				<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color: #888"></div>
				<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color: #888"></div>
				<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="width:2em;" count="6" numericMargin="1" maximum="100" constraints="{pattern:'#'}"></ol>
		</div>
</div>
<div class="widgetContainer">
		<h4 class="testTextArea">Number Spinner</h4>
		<label for="integerspinner1">Spinbox #1: </label><br>
		<input dojoType="dijit.form.NumberSpinner"
			onChange="dojo.byId('oc1').value=arguments[0]"
			value="900"
			class="bigFont"
			constraints="{max:1550,places:0}"
			name="integerspinner1"
			id="integerspinner1">
		    onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
		<button dojoType="dijit.form.Button" id="sv1_1" value="Set value to 400" onClick="dijit.byId('integerspinner1').set('value',400)" tabIndex="-1">Set value to 400</button>
		<button dojoType="dijit.form.Button" id="sv1_2" value="Set value to null" onClick="dijit.byId('integerspinner1').set('value',null)" tabIndex="-1">Set value to null</button>
		<button dojoType="dijit.form.Button" id="sv1_3" value="Set required to false" onClick="dijit.byId('integerspinner1').set('required',false)" tabIndex="-1">Set required to false</button>
		<button dojoType="dijit.form.Button" id="sv1_4" value="Set required to true" onClick="dijit.byId('integerspinner1').set('required',true)" tabIndex="-1">Set required to true</button>
		<br>
</div>
<div class="widgetContainer">
		<h4 class="testTimeBox">TimeTextBox</h4>
		<label for="q1">Time using local conventions with seconds</label>
		<span class="noticeMessage">TimeTextBox class, 	Attributes: {formatLength:'medium'}</span>
		<input id="q1" type="text" name="time1" value="T17:45:00"
			dojoType="dijit.form.TimeTextBox"
			constraints="{formatLength:'medium'}"
			required="true"
			onChange="dojo.byId('oc1').value=arguments[0]"
			invalidMessage="Invalid time." />
			onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
		<br>
</div>

</body>
</html>